<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html lang="en">
<head>
<jsp:include page="core/templates/header.jsp"></jsp:include>
</head>
<body class="header1 activateAppearAnimation">
	<div id="globalWrapper">
		<jsp:include page="core/templates/mainMenu.jsp"></jsp:include>
		<jsp:include page="core/templates/banner.jsp"></jsp:include>
		<!-- Content -->
		<section style="background: url('core/images/feature.png') repeat;">
			<div class="container pb15 pt15 ">
				<div class="row">
					<div class="col-md-10 mt15">
						<h2 class="textColorBlack">ค้นหาบริการที่ต้องการ</h2>
					</div>
					<div class="col-md-2 mt15">
						<div class="textCenter">
							<a href="postJob"><button type="submit"
									class="btn btn-labeled btn-success font4">
									<span class="btn-label"><i class="icon-briefcase"></i></span>ประกาศบริการ
									ฟรี !
								</button></a>
						</div>
					</div>
				</div>
				<div class="row mb15">
					<div class="col-md-12 mt15">
						<s:form action="listServicePage" method="post" theme="css_xhtml"
							id="myform" name="myform">
							<div class="row col-md-12 mt15 boxFocus color1"
								style="margin: auto;">
								<div class="row mb05 mt05">
									<div class="col-md-6">
										<s:textfield name="model.searchForm.keyword"
											cssClass="form-control" placeholder="ระบุคำที่ต้องการค้นหา"></s:textfield>
									</div>
									<div class="col-md-2">
										<b>หมวดหมู่ของบริการ :</b>
									</div>
									<div class="col-md-4">
										<s:select headerKey="0" headerValue="--- ทั้งหมด ---"
											list="model.listAptitudeType" listKey="aptitudeTypeID"
											listValue="aptitudeTypeName" cssClass="form-control"
											name="model.searchForm.aptitudeType" />

									</div>
								</div>
								<div class="row mb05 mt05">
									<div class="col-md-3">
										<b>ระดับความน่าเชื่อถือของผู้ให้บริการ :</b>
									</div>
									<div class="col-md-3">
										<s:select headerKey="0" headerValue="--- ทั้งหมด ---"
											list="#{'5':'ระดับที่ 5 มากสุด','4':'ระดับที่ 4 มาก','3':'ระดับที่ 3 ปานกลาง',
											'2':'ระดับที่ 2 พอใช้','1':'ระดับที่ 1 น้อยสุด'}"
											cssClass="form-control" name="model.searchForm.trust" />

									</div>
									<div class="col-md-2">
										<b>จังหวัดของผู้ให้บริการ :</b>
									</div>
									<div class="col-md-4">
										<select class="form-control" name="model.searchForm.workArea">
											<option value="">--- เลือก ---</option>
											<option>เชียงใหม่</option>
											<option>เชียงราย</option>
											<option>แพร่</option>
											<option>น่าน</option>
											<option>ลำปาง</option>
										</select>

									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<button type="submit"
											class="col-md-12 col-xs-12 col-sm-12 btn btn-info mt15">
											<div>
												<i class="icon-search"></i><span class="font3">
													ค้นหางาน</span>
											</div>
										</button>
									</div>
								</div>
							</div>
						</s:form>
					</div>
				</div>
			</div>
		</section>
		<section class="pt05 colorBlue">
			<div class="container pb05 pt15">
				<div class="row">
					<h2 class="textColorBlack">ค้นหาบริการตามหมวดหมู่</h2>
					<div id="demo">
						<div class="container">
							<div class="row mt05">
								<s:iterator value="model.listAptitudeType">
									<div
										class="col-md-2 col-sm-6 col-xs-6 nekoAnim-invisible nekoAnim-animated nekoAnim-fadeInLeftBig nekoAnim-visible"
										data-nekoanim="fadeInLeftBig" data-nekodelay="10"
										style="-webkit-animation: 10ms 10ms;">
										<article class="boxIcon" style="opacity: 1;">
											<s:a
												href="listServicePage?model.searchForm.aptitudeType=%{aptitudeTypeID}"
												encode="true" method="post">
												<div class="imgBorder">
													<img class="img-circle img-responsive"
														src='<s:property value="image_icon"/>' alt="">
												</div>
												<h2 class="textColorBlack">
													<b><s:property value="aptitudeTypeName" /></b>
												</h2>
											</s:a>
										</article>
									</div>
								</s:iterator>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="pt30 pb15"
			style="background-color: rgba(226, 231, 238, 0.58); color: #000;">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="">
							<div class="row mb15">
								<div class="col-md-12">
									<h2>บริการยอดนิยม</h2>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<div class="color0 boxcontent">
										<div class="row">
											<s:iterator value="model.listServiceRecommend">
												<div class="col-md-6 mb05">
													<div class="media">
														<a class="pull-left" href="#"> <img
															src="<s:property value="service.listPaymentOfService[0].listPicture[0].pictureLocation"/>"
															alt="" class="img-thumbnail img-responsive" width="64px"
															height="64px">
														</a>
														<div class="media-body">
															<h4 class="media-heading">
																<b class="textColorBlack"><s:property
																		value="service.serviceName" /></b><br>
																<ul class="entry-meta">
																	<li class="entry-comments"><a href="#"><i
																			class="glyphicon glyphicon-bell"></i>&nbsp;ผู้ร้องขอ
																			<s:property value="amountRequestPost" /> คน</a></li>
																	<li class="entry-comments"><a href="#"><i
																			class=" glyphicon glyphicon-tag"></i>&nbsp;<s:property
																				value="service.priceRange" /></a></li>
																</ul>
																<b class="textColorBlack">ความน่าเชื่อถือของผู้ให้บริการ
																	: </b><small> <span class="textColorYelow">
																		<s:iterator var="counter" begin="1"
																			end="user.trustLevel">
																			<i class="icon-star"></i>
																		</s:iterator> <s:iterator var="counter" begin="1"
																			end="5 - user.trustLevel">
																			<i class="icon-star-empty"></i>
																		</s:iterator>
																</span> <br>
																</small>
																<s:property value="service.descriptionOfService" />
																&nbsp;&nbsp;<a href="#">อ่านต่อ</a>
															</h4>
														</div>
													</div>
												</div>
											</s:iterator>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="pt30 pb30"
			style="background: url('core/images/feature.png') repeat;">
			<div class="container" data-nekoanim="fadeInUp" data-nekodelay="5">
				<div class="row">
					<div class="col-md-2  col-sm-4 col-xs-6">
						<img src="custom/images/temp/post02.png"
							class="img-responsive img-rounded" alt="clients">
					</div>

					<div class="col-md-2  col-sm-4 col-xs-6">
						<img src="custom/images/temp/post02.png"
							class="img-responsive img-rounded" alt="clients">
					</div>

					<div class="col-md-2 col-sm-4 col-xs-6">
						<img src="custom/images/temp/post02.png"
							class="img-responsive img-rounded" alt="clients">
					</div>

					<div class="col-md-2  col-sm-4 col-xs-6">
						<img src="custom/images/temp/post02.png"
							class="img-responsive img-rounded" alt="clients">
					</div>

					<div class="col-md-2  col-sm-4 col-xs-6">
						<img src="custom/images/temp/post02.png"
							class="img-responsive img-rounded" alt="clients">
					</div>

					<div class="col-md-2  col-sm-4 col-xs-6">
						<img src="custom/images/temp/post02.png"
							class="img-responsive img-rounded" alt="clients">
					</div>
				</div>
			</div>
		</section>

		<!-- Content -->
		<jsp:include page="core/templates/footer.jsp" />
	</div>
</body>
</html>